<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="user" value="${sessionScope.user}"/>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<head>
    <title>搜索页</title>
    <!--CSS styles-->
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/bootstrap.css" />
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/animate.css" />
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/theme.css" />
    <link rel="stylesheet" media="all" href="${path}/pet/home/css/linear-icons.css" />
    <!--JS files-->
    <script src="${path}/pet/home/js/jquery.min.js"></script>
    <script src="${path}/pet/home/js/jquery.bootstrap.js"></script>
    <script src="${path}/pet/home/js/main.js"></script>
</head>

<body>
<nav class="navbar-fixed">
    <div class="container">
        <div class="navigation navigation-main">
            <a href="" class="logo"><img src="${path}/pet/home/assets/images/logo.jpg" alt="" /></a>
            <a href="#" class="open-menu"><i class="icon icon-menu"></i></a>
            <div class="floating-menu">
                <div class="close-menu-wrapper">
                    <span class="close-menu"><i class="icon icon-cross"></i></span>
                </div>
                <ul>
                    <li id="regist"><a href="${path}/regist">注册</a></li>
                    <li id="login"><a href="${path}/login">登录</a></li>
                    <li id="exitlogin" style="display: none;"><a>退出登录</a></li>
                    <li><a href="">首页</a></li>
                    <li><a href="${path}/myOrders">订单</a></li>
                    <li><a href="${path}/chat">社交<span id="badge" style="display: none;"></span></a></li>
                    <li><a href="${path}/chat?role=kf">客服</a></li>
                    <li><a href="${path}/myAccount">我的</a></li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<section class="main-header" style="background-image:url(${path}/pet/home/assets/images/gallery-3.jpg)">
    <header>
        <div class="container">
            <h1 class="h2 title">保险</h1>
        </div>
    </header>
</section>

<%------- 产品 -----------------------%>
<section class="products">
    <div class="container">
        <header class="hidden">
            <h3 class="h3 title">产品类别网格</h3>
        </header>
        <div class="row">
            <%------- 产品搜索栏 -----------------------------------%>
            <div class="col-md-3 col-xs-12">
                <div class="filters">
                    <div class="filter-box active">
                        <div class="title">价格</div>
                        <div class="filter-content" >
                            <input type="text" name="price" id="price0">
                            <p style="display: inline-block;">--</p>
                            <input type="text" name="price" id="price1">
                        </div>
                    </div>
                    <div class="filter-box active">
                        <div class="title">类别</div>
                        <div class="filter-content">
                            <span class="checkbox type" id="type"></span>
                        </div>
                    </div>
                    <div class="filter-box active">
                        <div class="title">种类</div>
                        <div class="filter-content">
                            <span class="checkbox mat" id="mat"></span>
                        </div>
                    </div>
                    <div class="toggle-filters-close btn btn-main" id="search">搜索</div>
                </div>
            </div>
            <!-- 产品列表 -->
            <div id="product_list">
                <div class="col-md-9 col-xs-12" style="overflow-y: auto;height: 1108px;" id="product">
                    <div class="row"></div>
                </div>
            </div>
        </div>
    </div>
</section>
</body>

<script>
    $(document).ready(function() {
        var user="<%=session.getAttribute("user")%>";

        //在用户操作时，验证是否登陆
//        $("body").click(function() {
//            if (user == "null") {
//                alert("请登录，如没有账号，请注册");
//                return false;  //点击alert()的确定后，页面不刷新也不跳转
//            }
//        });
        if(user != "null") {
            var uid = "${user.id}";
            console.log(uid);
            $('#login').empty();   //当用户登录后，不显示登录/注册按钮
            $('#regist').empty();
            $("#exitlogin").show();
            $("#badge").show();
            $.ajax({
                url: '/message/longSearch',
                data: {uid:uid},
                dataType:'json',
                type: 'POST',
                success: function (result) {
                    var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                    $("#badge").html(num);
                }
            });

            setInterval(function(){
                $.ajax({
                    url: '/message/longSearch',
                    data: {uid:uid},
                    dataType:'json',
                    type: 'POST',
                    success: function (result) {
                        var num = result.好友请求的数目 + result.好友拒绝的数目 +result.未读消息数目;
                        $("#badge").html(num);
                    }
                });
            }, 5000);
        }
        $("#exitlogin").click(function(){
            var username = "${user.username}";
            $.ajax({
                type: 'POST',
                url: '/user/logout',
                dataType: "json",
                data: {username:username},
                error: function () {
                    console.log("失败");
                },
                success: function (data) {
                    alert("已退出账号，如有需要，请重新登录");
                    window.location.href = '${path}/home';
                }
            });
        });

        $("#login").click(function(){
            window.alert = function(str) {
                return;       //在点击“登录”和“注册”时，禁止弹框，直接跳转
            };
            window.location.href = '${path}/login';
        });
        $("#regist").click(function(){
            window.alert = function(str) {
                return;
            };
            window.location.href = '${path}/regist';
        });

        //获取搜索栏内的“类别”的数据
        $.ajax({
            type: 'POST',
            url: '/item/allItemType',
            dataType : "json",
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                var str ="";
                var i=0;
                for(var key in result){
                    for(i=0; i<result[key].length; i++) {
                        str += '<input type="radio" class="radiogroup-type" name="radiogroup-type" id="typeId'+i+'" value="'+ result[key][i] +'">'+ '<label for="typeId'+i+'">' + result[key][i] + '</label>';
                    }
                    $('#type').html(str);
                }
            }
        });

        //获取搜索栏内的“种类”的数据
        $.ajax({
            type: 'POST',
            url: '/item/allItemSubject',
            dataType : "json",
            error: function () {
                console.log("失败");
            },
            success: function (result) {
                var str0 ="";
                for(var key in result){
                    for(var i=0; i<result[key].length; i++) {
                        str0 += '<input type="radio" name="radiogroup-material" id="matId'+i+'" value="'+ result[key][i] +'">'+ '<label for="matId'+i+'">' + result[key][i] + '</label>';
                    }
                    $('#mat').html(str0);
                }
            }
        });

        //打开页面后，显示的保险内容
        $.ajax({
            type: "POST",
            url: '/item/search',
            contentType: "application/x-www-form-urlencoded",
            success: function (result) {
                var str ="";
                var i=0;
                for(var key in result){
                    for(i=0; i<result[key].length; i++) {
                        if(result[key][i].type != "优惠券") {
                            str += '<div class="col-md-6 col-xs-6">';
                            str += '<article>';
                            str += '<div class="figure-grid">';
                            str += '<div class="image">';
                            str += '<a href="${path}/productDetail?id='+ result[key][i].id +'" class="mfp-open">';
                            str += '<div class="img1">';
                            str += '<img src="${path}/backstage/images/'+result[key][i].picUrl+'" alt="" />';
                            str += '</div>';
                            str += '</a>';
                            str += '</div>';
                            str += '<div class="text" id="introduction">';
                            str += '<h2 class="title h4"><a href="${path}/productDetail?id='+ result[key][i].id +'">' +result[key][i].itemName+'</a></h2>';
                            str += '<sup>' +result[key][i].price+ '</sup>';
                            str += '</div>';
                            str += '</div>';
                            str += '</article>';
                            str += '</div>';
                        }
                    }
                }
                $('#product').html(str);
            },
            error: function (result) {
                console.log("失败");
            }
        });

        //点击搜索按钮的效果
        $("#search").click(function() {
            var lower = $.trim($("#price0").val());
            var upper = $.trim($("#price1").val());
            var type = $.trim($("input[name='radiogroup-type']:checked").val());
            var subject = $.trim($("input[name='radiogroup-material']:checked").val());
            var qData = {
                type:type,
                subject:subject,
                upper:upper,
                lower:lower
            };
            console.log(type);
            console.log(subject);
            console.log(upper);
            console.log(lower);
            $("#product").empty();
            $.ajax({
                type: "POST",
                url: '/item/search',
                contentType: "application/x-www-form-urlencoded",
                data: qData,
                success: function (result) {
                    var str ="";
                    var i=0;
                    for(var key in result){
                        console.log(key);
                        for(i=0; i<result[key].length; i++) {
                            console.log(result[key][i]);
                            str += '<div class="col-md-6 col-xs-6">';
                            str += '<article>';
                            str += '<div class="info">';
                            str += '<span class="add-favorite">';
                            str += '<a href="javascript:void(0);" data-title="Add to favorites" data-title-added="Added to favorites list">';
                            str += '<i class="icon icon-heart"></i>';
                            str += '</a>';
                            str += '</span>';
                            str += '</div>';
                            str += '<div class="figure-grid">';
                            str += '<div class="image">';
                            str += '<a href="${path}/productDetail?id='+ result[key][i].id +'" class="mfp-open">';
                            str += '<div class="img1">';
                            str += '<img src="${path}/backstage/images/'+result[key][i].picUrl+'" alt="" />';
                            str += '</div>';
                            str += '</a>';
                            str += '</div>';
                            str += '<div class="text" id="introduction">';
                            str += '<h2 class="title h4"><a href="${path}/productDetail?id='+ result[key][i].id +'">' +result[key][i].itemName+'</a></h2>';
                            str += '<sup>' +result[key][i].price+ '</sup>';
                            str += '</div>';
                            str += '</div>';
                            str += '</article>';
                            str += '</div>';
                        }
                    }
                    $('#product').html(str);
                },
                error: function (result) {
                    console.log("失败");
                }
            });
        });
    });
</script>
<style type="text/css">
    .box-length1 {
        width: 30%;
        margin-left: 35px;
        margin-right: 10px;
    }
    .box-length2 {
        width: 30%;
    }
    .test {
        display: inline-block;
        width: 10%;
    }
    .box-font {
        background-color: white;
    }
    #price0 {
        width: 40%;
        display: inline-block;
    }
    #price1 {
        width: 40%;
        display: inline-block;
    }
    #badge {
        padding: 2px 5px;  /* 不需要定义height与width，添加合适的padding使圆圈随字符长短变化而改变 */
        line-height: 20px;
        text-align: center;
        background-color: red;
        color: white;
        font-size: 12px;
        font-weight: 700;
        border-radius: 50%;
        /*position: relative;*/
        /*bottom: 45px;*/
        /*left: -20px;*/
    }
</style>
</html>





